<template>
  <el-container>
    <el-aside>
      <h1>数据导出</h1>
      <div id="dataScreen">
        <h2>数据选择</h2>
        <div class="dataScreen">
          <el-select v-model="queryList.province" placeholder="选择省份" clearable @change="handleChanged">
            <el-option
              v-for="(item, index) in screenOptions.provinceOptions"
              :key="index"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
        </div>
        <div class="dataScreen">
          <el-select v-model="queryList.region" placeholder="选择区域" clearable @change="handleChanged">
            <el-option
              v-for="(item, index) in screenOptions.regionOptions"
              :key="index"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
        </div>
        <div class="dataScreen">
          <el-select v-model="queryList.pipeline" placeholder="选择管线" clearable @change="handleChanged">
            <el-option
              v-for="(item, index) in screenOptions.pipelineOptions"
              :key="index"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
        </div>
        <div class="dataScreen">
          <el-select v-model="queryList.site" placeholder="选择站点" clearable @change="handleChanged">
            <el-option
              v-for="(item, index) in screenOptions.siteOptions"
              :key="index"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
        </div>
        <div class="dataScreen">
          <el-select v-model="queryList.management" placeholder="选择管理单位" clearable @change="handleChanged">
            <el-option
              v-for="(item, index) in screenOptions.managementOptions"
              :key="index"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
        </div>
        <div class="dataScreen">
          <el-select v-model="queryList.principal" placeholder="选择负责人" clearable @change="handleChanged">
            <el-option
              v-for="(item, index) in screenOptions.principalOptions"
              :key="index"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
        </div>
      </div>
      <div id="exportButton">
        <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="download">
          导出
        </el-button>
      </div>
    </el-aside>
    <el-main style="width: 100%;">
      <el-table
        :data="equipmentData"
        stripe
        style="width: 100%"
        :border="true"
      >
        <el-table-column
          prop="equipmentNumber"
          label="设备编号"
          min-width="50"
          fixed
          align="center"
          :sortable="true"
        />
        <el-table-column
          prop="equipmentName"
          label="设备名称"
          min-width="50"
          align="center"
        />
        <el-table-column
          prop="time"
          label="上传时间"
          min-width="30"
          align="center"
        />
        <el-table-column
          prop="i1"
          label="通道一"
          min-width="30"
          align="center"
        />
        <el-table-column
          prop="i2"
          label="通道二"
          min-width="30"
          align="center"
        />
        <el-table-column
          prop="i3"
          label="通道三"
          min-width="30"
          align="center"
        />
        <el-table-column
          prop="i4"
          label="通道四"
          min-width="30"
          align="center"
        />
        <el-table-column
          prop="electricQuantity"
          label="设备电量(%)"
          min-width="30"
          align="center"
        />
        <el-table-column
          prop="signalStrength"
          label="信号强度"
          min-width="30"
          align="center"
        />
        <el-table-column
          prop="uploadFrequency"
          label="上传频率"
          min-width="30"
          align="center"
        />
        <el-table-column
          prop="province"
          label="所属省份"
          min-width="30"
          align="center"
        />
        <el-table-column
          prop="region"
          label="所属区域"
          min-width="30"
          align="center"
        />
        <el-table-column
          prop="site"
          label="所属站点"
          min-width="30"
          align="center"
        />
        <el-table-column
          prop="pipeline"
          label="所属管线"
          min-width="30"
          align="center"
        />
        <el-table-column
          prop="principal"
          label="负责人"
          min-width="30"
          align="center"
        />
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryList.page" :limit.sync="queryList.amount" @pagination="getList" />
    </el-main>
  </el-container>
</template>
<script>
import pagination from '@/components/Pagination' // secondary package based on el-pagination
import { parseTime } from '@/utils'
import { fetchOptions, fetchList } from '@/api/export'

export default {
  components: { pagination },
  data() {
    return {
      total: 10,
      downloadLoading: false,
      screenOptions: {
        provinceOptions: [],
        regionOptions: [],
        pipelineOptions: [],
        managementOptions: [],
        principalOptions: [],
        siteOptions: []
      },
      queryList: {
        page: 1,
        amount: 10,
        province: '',
        region: '',
        pipeline: '',
        management: '',
        principal: '',
        site: ''
      },
      equipmentData: []
    }
  },
  mounted() {
    this.getOptions()
    this.getList()
  },
  methods: {
    handleChanged() {
      this.getList()
    },
    download() {
      this.downloadLoading = true
      this.getList()
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['设备编号', '设备名称', '上传时间', '通道1数据', '通道2数据', '通道3数据', '通道4数据', '设备电量', '信号强度', '上传频率', '所属省份', '区域', '站点', '管线', '负责人']
        const filterVal = ['equipmentNumber', 'equipmentName', 'time', 'i1', 'i2', 'i3', 'i4', 'electricQuantity', 'signalStrength', 'uploadFrequency', 'province', 'region', 'site', 'pipeline', 'principal']
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '导出数据'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal) {
      return this.equipmentData.map(v => filterVal.map(j => {
        if (j === 'time') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    getList() {
      fetchList(this.queryList).then(response => {
        this.equipmentData = response.data.equipmentData
        this.total = response.data.total
      })
    },
    getOptions() {
      fetchOptions().then(response => {
        this.screenOptions.regionOptions = response.data.regionOptions
        this.screenOptions.provinceOptions = response.data.provinceOptions
        this.screenOptions.pipelineOptions = response.data.pipelineOptions
        this.screenOptions.managementOptions = response.data.managementOptions
        this.screenOptions.principalOptions = response.data.principalOptions
        this.screenOptions.siteOptions = response.data.siteOptions
      })
    }
  }
}

</script>
<style lang="scss">
  #exportSet{
    margin-top: 50px;
  }
  #dataScreen{
    margin-top: 80px;
  }
  #exportButton{
    margin-top: 70px;
    margin-left: 150px;
  }
  #popover{
    padding: 1px 7px;
    border-radius: 50%;
  }
  .dataScreen{
    margin-bottom: 9px;
  }
</style>
